<template>
  <div id="main">

    <h2>教学管理次数统计</h2>
    <div class="head">
      <el-input v-model="searchTableInfo" placeholder="请输入搜索内容" style="width:240px;float: right;margin:20px;" />
    </div>
    <div id="table-area">
      <el-table
        v-loading="listLoading"
        :data="list.slice((currentPage-1)*pagesize,currentPage*pagesize)"
        element-loading-text="Loading"
        border
        fit
        highlight-current-row
      >

        <el-table-column
          label="序号"
          type="index"
          align="center"
        >
          <template scope="scope">
            <span>{{ (currentPage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column
          align="center"
          prop="countAllTeachingManagementTimesStatisticsTeacherName"
          label="教师姓名"
        />

        <el-table-column
          align="center"
          prop="countAllTeachingManagementTimesStatisticsTeacherJob"
          label="职务"
        />

        <el-table-column
          align="center"
          prop="countAllTeachingManagementTimesStatisticsRecordTimes"
          label="教学记录次数"
        />

        <el-table-column
          align="center"
          prop="countAllTeachingManagementTimesStatisticsManagementTimes"
          label="教学管理次数"
        />

      </el-table>

      <div id="pages">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[5,10]"
          :page-size="pagesize"
          layout="total, sizes,prev, pager, next"
          :total="list.length"
          prev-text="上一页"
          next-text="下一页"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

  </div>

</template>
<script>
import { eduManageCountStatistics } from '@/api/statistics'
export default {

  data() {
    return {
      currentPage: 1, // 默认显示页面为1
      pagesize: 5, //    每页的数据条数
      url: process.env.VUE_APP_BASE_API + 'file/',
      imageUrl: '',
      // list: [],
      tableList: [],
      listLoading: false,
      dialogFormVisible: false,
      editType: 1, // 1 添加 2 修改
      pay: {},
      formLabelWidth: '200px',
      searchTableInfo: ''
    }
  },
  computed: {
    // 根据计算属性模糊搜索
    list() {
      const searchTableInfo = this.searchTableInfo
      console.log(this.searchTableInfo)
      if (searchTableInfo) {
        // filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
        // 注意： filter() 不会对空数组进行检测。
        // 注意： filter() 不会改变原始数组。
        return this.tableList.filter(data => {
          console.log('success' + data)
          // some() 方法用于检测数组中的元素是否满足指定条件;
          // some() 方法会依次执行数组的每个元素：
          // 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;
          // 如果没有满足条件的元素，则返回false。
          // 注意： some() 不会对空数组进行检测。
          // 注意： some() 不会改变原始数组。
          return Object.keys(data).some(key => {
            // indexOf() 返回某个指定的字符在某个字符串中首次出现的位置，如果没有找到就返回-1；
            // 该方法对大小写敏感！所以之前需要toLowerCase()方法将所有查询到内容变为小写。
            return String(data[key]).toLowerCase().indexOf(searchTableInfo) > -1
          })
        })
      }
      return this.tableList
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 每页下拉显示数据
    handleSizeChange: function(size) {
      this.pagesize = size
    },
    // 点击第几页
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
    },
    handleClick(row) {
      console.log(row)
    },
    fetchData() {
      this.listLoading = true
      eduManageCountStatistics().then((data) => {
        this.tableList = data.obj
        this.listLoading = false
      })
    }

  }

}
</script>

<style scoped>
#main{
  margin-left: 5px;
  margin-right: 5px;
}
#table-area{
  margin-left: 10px;
  margin-right: 10px;
}
</style>
